<template>
  <div>
    <!--搜索框-->
    <div class="pd-10">
      <el-input style="width: 200px" suffix-icon="el-icon-search" placeholder="请输入用户名" class="mr-5" v-model="username"></el-input>
      <el-input style="width: 200px" suffix-icon="el-icon-message" placeholder="请输入姓名" class="mr-5" v-model="nickname"></el-input>
      <el-input style="width: 200px" suffix-icon="el-icon-position" placeholder="请输入地址" class="mr-5" v-model="address"></el-input>
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
    <!--新增按钮-->
    <div class="mg-10">
      <!--批量删除-->
      <el-popconfirm
          title="您确定批量删除这些数据吗？"
          @confirm="delBatch" v-if="this.user.role === 'ROLE_ADMIN'">
        <el-button class="ml-5" type="danger" slot="reference">
          <i class="el-icon-remove-outline"></i>批量删除
        </el-button>
      </el-popconfirm>
      <el-upload :action="action" style="display: inline-block"
                 :show-file-list="false" accept="xlsx" :on-success="handleExcelImportSuccess">
        <el-button class="ml-5" type="primary">
          <i class="el-icon-bottom"></i>导入
        </el-button>
      </el-upload>
      <el-button class="ml-5" type="primary" @click="exportFile">
        <i class="el-icon-top"></i>导出
      </el-button>
    </div>
    <!--标签页-->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="患者信息" name="first">
        <el-table :data="patientTableData" border stripe :header-cell-style="{background: '#cccccc'}"  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50">
          </el-table-column>
          <el-table-column prop="id" label="ID" width="50">
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="90">
          </el-table-column>
          <el-table-column prop="nickname" label="姓名" width="90">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="60">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.sex === 1">男</el-tag>
              <el-tag type="success" v-if="scope.row.sex === 0">女</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="60">
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="140">
          </el-table-column>
          <el-table-column prop="phone" label="电话" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="140">
          </el-table-column>
          <el-table-column prop="role" label="角色">
            <template slot-scope="scope">
              <el-tag type="primary" v-if="scope.row.role === 'ROLE_PATIENT'">患者</el-tag>
              <el-tag type="primary" v-if="scope.row.role === 'ROLE_DOCTOR'">患者</el-tag>
              <el-tag type="success" v-if="scope.row.role === 'ROLE_ADMIN'">管理员</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建日期" width="140">
          </el-table-column>
          <el-table-column label="操作" width="280" v-if="this.user.role === 'ROLE_ADMIN'">
            <template slot-scope="scope">
              <el-button type="success" @click="handleBooking(scope.row)">挂号信息<i class="el-icon-edit"></i></el-button>
              <el-button type="success" @click="handleMedical(scope.row)">病历信息<i class="el-icon-edit"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="医生信息" name="second">
        <el-table :data="doctorTableData" border stripe :header-cell-style="{background: '#cccccc'}"  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50">
          </el-table-column>
          <el-table-column prop="id" label="ID" width="50">
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="90">
          </el-table-column>
          <el-table-column prop="nickname" label="姓名" width="90">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="60">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.sex === 1">男</el-tag>
              <el-tag type="success" v-if="scope.row.sex === 0">女</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="60">
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="140">
          </el-table-column>
          <el-table-column prop="phone" label="电话" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="140">
          </el-table-column>
          <el-table-column prop="role" label="角色">
            <template slot-scope="scope">
              <el-tag type="primary" v-if="scope.row.role === 'ROLE_PATIENT'">患者</el-tag>
              <el-tag type="warning" v-if="scope.row.role === 'ROLE_DOCTOR'">医生</el-tag>
              <el-tag type="success" v-if="scope.row.role === 'ROLE_ADMIN'">管理员</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="department" label="科室">
            <template slot-scope="scope">
              <el-tag type="danger" size="big">{{ scope.row.department.deptName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建日期" width="140">
          </el-table-column>
          <el-table-column label="操作" width="280" v-if="this.user.role === 'ROLE_ADMIN'">
            <template slot-scope="scope">
              <el-button type="success" @click="handleRecord(scope.row)">接诊记录<i class="el-icon-edit"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="管理员信息" name="third">
        <el-table :data="adminTableData" border stripe :header-cell-style="{background: '#cccccc'}"  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50">
          </el-table-column>
          <el-table-column prop="id" label="ID" width="50">
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="90">
          </el-table-column>
          <el-table-column prop="nickname" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="60">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.sex === 1">男</el-tag>
              <el-tag type="success" v-if="scope.row.sex === 0">女</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="60">
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="140">
          </el-table-column>
          <el-table-column prop="phone" label="电话" width="130">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="140">
          </el-table-column>
          <el-table-column prop="role" label="角色">
            <template slot-scope="scope">
              <el-tag type="primary" v-if="scope.row.role === 'ROLE_PATIENT'">患者</el-tag>
              <el-tag type="primary" v-if="scope.row.role === 'ROLE_DOCTOR'">患者</el-tag>
              <el-tag type="success" v-if="scope.row.role === 'ROLE_ADMIN'">管理员</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建日期" width="140">
          </el-table-column>
          <el-table-column label="操作" width="180" v-if="this.user.role === 'ROLE_ADMIN'">
            <template slot-scope="scope">
              <el-button type="success" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
              <el-popconfirm
                  class="ml-5"
                  confirm-button-text='确定'
                  cancel-button-text='我再想想'
                  icon="el-icon-info"
                  icon-color="red"
                  title="您确定删除吗？"
                  @confirm="del(scope.row.id)">
                <el-button type="danger" slot="reference">删除<i class="el-icon-delete"></i></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!--分页-->
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <!--弹出框-->
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form" size="small">
        <el-form-item label="用户名" label-width="80px">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色" label-width="80px">
          <el-select clearable v-model="form.role" placeholder="请设置角色" style="width: 100%">
            <el-option v-for="item in roles" :key="item.name" :label="item.name" :value="item.flag">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="昵称" label-width="80px">
          <el-input v-model="form.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="80px">
          <el-select clearable v-model="form.sex" placeholder="请选择性别" style="width: 100%">
            <el-option v-for="item in sexs" :key="item.id" :label="item.name" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" label-width="80px">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="80px">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" label-width="80px">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" label-width="80px">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <!--展示挂号信息的抽屉-->
    <el-drawer
        title="挂号信息"
        :visible.sync="handleBookDrawer"
        direction="ttb"
        size="50%">
      <!--挂号表格-->
      <el-table :data="bookTableData" border stripe :header-cell-style="{background: '#cccccc'}"  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="50">
        </el-table-column>
        <el-table-column prop="name" label="类型" width="140">
        </el-table-column>
        <el-table-column prop="payPrice" label="实付款" width="120">
        </el-table-column>
        <el-table-column prop="orderNo" label="订单编号" width="120">
        </el-table-column>
        <el-table-column prop="doctorName" label="医生姓名">
        </el-table-column>
        <el-table-column prop="username" label="挂号人姓名">
        </el-table-column>
        <el-table-column prop="payTime" label="支付时间">
        </el-table-column>
        <el-table-column prop="state" label="支付状态">
          <template slot-scope="scope">
            <span style="color: #f3062a;font-weight: bold" v-if="scope.row.state === 0">{{ scope.row.state === 0 ? "未支付" : (scope.row.state === 1 ? "已支付" : "未知") }}</span>
            <span style="color: #3a8ee6;font-weight: bold" v-if="scope.row.state === 1">{{ scope.row.state === 0 ? "未支付" : (scope.row.state === 1 ? "已支付" : "未知") }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div style="padding: 10px 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-drawer>
    <!--展示病历信息的抽屉-->
    <el-drawer
        title="病历信息"
        :visible.sync="handleMedicalRecordDrawer"
        direction="ttb"
        size="50%">
      <!--病历信息表格-->
      <el-table :data="medicalRecordTableData" border stripe :header-cell-style="{background: '#cccccc'}"  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="50">
        </el-table-column>
        <el-table-column prop="patientName" label="患者姓名" width="100">
        </el-table-column>
        <el-table-column prop="doctorName" label="医生姓名" width="100">
        </el-table-column>
        <el-table-column prop="content" label="病历详情" width="150">
          <template slot-scope="scope">
            <el-button type="primary" @click="view(scope.row)">查看内容</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注">
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期">
        </el-table-column>
      </el-table>
      <!--分页-->
      <div style="padding: 10px 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-drawer>
    <!--展示医生接诊信息的抽屉-->
    <el-drawer
        title="病历信息"
        :visible.sync="handleDoctorMedicalRecordDrawer"
        direction="ttb"
        size="50%">
      <!--病历信息表格-->
      <el-table :data="doctorMedicalRecordTableData" border stripe :header-cell-style="{background: '#cccccc'}"  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="50">
        </el-table-column>
        <el-table-column prop="patientName" label="患者姓名" width="100">
        </el-table-column>
        <el-table-column prop="doctorName" label="医生姓名" width="100">
        </el-table-column>
        <el-table-column prop="content" label="病历详情" width="150">
          <template slot-scope="scope">
            <el-button type="primary" @click="view(scope.row)">查看内容</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注">
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期">
        </el-table-column>
      </el-table>
      <!--分页-->
      <div style="padding: 10px 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-drawer>
    <!--详细内容弹出框-->
    <el-dialog title="病历详情" :visible.sync="detailDialogFormVisible" width="60%" ref="img">
      <el-descriptions size="medium">
        <el-descriptions-item label="患者姓名"><el-link :underline="false" style="font-weight: bold">{{ medicalRecordDetail.patientName }}</el-link></el-descriptions-item>
        <el-descriptions-item label="医生姓名"><el-link :underline="false" style="font-weight: bold">{{ medicalRecordDetail.doctorName }}</el-link></el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small" type="danger">{{ medicalRecordDetail.remark }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="日期"><el-link :underline="false" type="warning">{{ medicalRecordDetail.createTime }}</el-link></el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-button type="text" style="font-size: 24px;margin-bottom: 15px">诊断结果</el-button>
      <div v-html="medicalRecordDetail.content"></div>
    </el-dialog>
  </div>
</template>

<script>
import {serverIp, serverPort} from "../../public/config";

export default {
  name: "User",
  data() {
    return {
      patientTableData: [],
      doctorTableData: [],
      adminTableData: [],
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      username:"",
      nickname: "",
      address: "",
      form: {},
      dialogFormVisible: false,
      multipleSelection: [],
      //分页
      pageNum: 1,
      pageSize: 5,
      total: 0,
      roles: [],
      sexs: [{id:1,value: 0,name:'女'},{id:2,value: 1,name: '男'}],
      patientRoleType: "ROLE_PATIENT",
      doctorRoleType: "ROLE_DOCTOR",
      adminRoleType: "ROLE_ADMIN",
      activeName: 'first',
      handleBookDrawer: false,
      handleMedicalRecordDrawer: false,
      bookTableData: [],
      medicalRecordTableData: [],
      medicalRecordDetail: {},
      detailDialogFormVisible: false,
      handleDoctorMedicalRecordDrawer: false,
      doctorMedicalRecordTableData: [],
      action: `http://${serverIp}:${serverPort}/user/import`
    }
  },
  methods: {
    load() {
      //获取患者信息
      this.request.get("/user/page",{
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          username: this.username,
          nickname: this.nickname,
          address: this.address,
          roleType: this.patientRoleType
        }
      }).then(res => {
        console.log(res);
        this.patientTableData = res.data.records
        this.total = res.data.total
      })
      //获取医生信息
      this.request.get("/user/page",{
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          username: this.username,
          email: this.email,
          address: this.address,
          roleType: this.doctorRoleType
        }
      }).then(res => {
        console.log(res);
        this.doctorTableData = res.data.records
        this.total = res.data.total
      })
      //获取管理员信息
      this.request.get("/user/page",{
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          username: this.username,
          email: this.email,
          address: this.address,
          roleType: this.adminRoleType
        }
      }).then(res => {
        console.log(res);
        this.adminTableData = res.data.records
        this.total = res.data.total
      })

      //获取下拉角色信息
      this.request.get("/role").then(res => {
        this.roles = res.data.slice(0,2)
      })
    },
    exportFile() {
      window.open(`http://${serverIp}:${serverPort}/user/export`)
    },
    handleExcelImportSuccess() {
      this.$message.success("上传成功")
      this.load()
    },
    handleAdd() {
      this.dialogFormVisible = true
    },
    save() {
      this.request.post("/user/save",this.form).then(res => {
        if (res.data) {
          this.dialogFormVisible = false
          this.form = {}
          this.$message.success("保存成功")
          this.load()
        }else {
          this.$message.error("保存失败")
        }
      })
    },
    handleEdit(row) {
      this.form = Object.assign({},row)
      this.dialogFormVisible = true
    },
    //患者的挂号信息
    handleBooking(booking) {
      //请求后端获取对应用户的挂号信息
      this.request.get("/order/page",{
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          nickname: ""
        }
      }).then(res => {
        console.log(res);
        this.bookTableData = res.data.records.filter(book => book.userId === booking.id)
        this.total = this.bookTableData.length
      })
      this.handleBookDrawer = true
    },
    //患者的病历单
    handleMedical(medicalRecord) {
      //请求后端获取对应用户的病历信息
      this.request.get("/medicalRecord/page",{
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          patientName: "",
          doctorName: ""
        }
      }).then(res => {
        console.log(res);
        this.medicalRecordTableData = res.data.records.filter(medical => medical.patientId === medicalRecord.id)
        this.total = this.medicalRecordTableData.length
      })
      this.handleMedicalRecordDrawer = true
    },
    //医生的接诊记录
    handleRecord() {
      //请求后端获取对应用户的病历信息
      this.request.get("/medicalRecord/page",{
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          patientName: "",
          doctorName: ""
        }
      }).then(res => {
        console.log(res);
        this.doctorMedicalRecordTableData = res.data.records.filter(medical => medical.doctorId === medicalRecord.id)
        this.total = this.doctorMedicalRecordTableData.length
      })
      this.handleDoctorMedicalRecordDrawer = true
    },
    view(medicalRecord) {
      this.medicalRecordDetail.patientName = medicalRecord.patientName
      this.medicalRecordDetail.doctorName = medicalRecord.doctorName
      this.medicalRecordDetail.content = medicalRecord.content
      this.medicalRecordDetail.remark = medicalRecord.remark
      this.medicalRecordDetail.createTime = medicalRecord.createTime
      this.detailDialogFormVisible = true
    },
    del(id) {
      this.request.delete("/user/"+id).then(res => {
        if (res.data) {
          this.$message.success("删除成功")
          this.load()
        }else {
          this.$message.error("删除失败")
        }
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    delBatch() {
      let ids = this.multipleSelection.map(v => v.id)
      this.request.post("/user/del/batch",ids).then(res => {
        if (res.data) {
          this.$message.success("批量删除成功")
          this.load()
        }else {
          this.$message.error("批量删除失败")
        }
      })
    },
    reset() {
      this.username = ""
      this.email = ""
      this.address = ""
      this.load()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.load()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val
      this.load()
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    }
  },
  created() {
    this.load()
  },
  watch: {
    dialogFormVisible() {
      if (this.dialogFormVisible === false) {
        this.form = {}
        console.log("执行了watch方法")
      }
    }
  }

}
</script>

<style>
.el-header {
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>